<template>
    <a-modal v-model:open="visible" :title="title" :confirm-loading="isLoading" :okText="okText" @ok="useOk" @cancel="useCancel">
      
      <div v-if="isInnerLoading"><a-spin /></div>
      <slot v-else />
    </a-modal>
</template>
<script setup>
import { ref, watch } from "vue"
// hook
import { useModalEvent } from "./use-modal-event"
// emit
const emit = defineEmits(["update:open"])
// props
import { modalProps } from "./modalProps"
const props = defineProps(modalProps)
// 解构
const { isLoading, isInnerLoading, useInnerLoading, useOk, useCancel, visible } = useModalEvent({ props })
// watch
watch(() => props.open, (status) => {
    visible.value = status
    status && useInnerLoading()
})
</script>
